<template>
  <div class="feedback-list" ref="feedbackList">
    <s-table
      ref="table"
      size="default"
      table-layout="fixed"
      :row-key="record => record.id"
      :columns="columns"
      :data="loadData"
    >
      <div slot="index" slot-scope="text, row, index">
        {{ getIndex(index) }}
      </div>
      <div slot="content" slot-scope="text" class="table__column--content">
        {{ text }}
      </div>
      <div slot="action" slot-scope="text, row">
        <a-button type="link" @click="openDetailsModal(row)">{{ $t('all.autotext568') }}</a-button>
      </div>
    </s-table>
    <a-modal
      dialog-class="feedback-list__modal"
      :title="$t('all.autotext684')"
      :getContainer="() => $refs.feedbackList"
      :visible="detailsModalVisible"
      :width="800"
      @cancel="handleCancel"
    >
      <div class="modal-content">
        <div class="feedback-list__time">
          <span class="label">{{ $t('all.autotext540') }}</span>
          <span class="create-time">{{ currentRow.createTime }}</span>
        </div>
        <div class="feedback-list__content">
          <p class="label">{{ $t('all.autotext320') }}</p>
          <a-input
            type="textarea"
            disabled
            :key="currentRow.id"
            :value="currentRow.content"
            :auto-size="{ minRows: 10, maxRows: 15 }"
          >
          </a-input>
        </div>
      </div>
      <div slot="footer">
        <a-button type="primary" @click="handleCancel">{{ $t('all.autotext892') }}</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { apiGetFeedbackList } from '@/api/feedback/feedback'
import { feedbackListColumns } from '@views/feedback/config/column'
import { unreactive } from '@/utils/util'
import moment from 'moment'

export default {
  name: 'feedback-list',
  data () {
    return {
      detailsModalVisible: false,
      columns: unreactive(feedbackListColumns),
      currentRow: {}
    }
  },
  methods: {
    getIndex (index) {
      const { current, pageSize } = this.$refs.table.getPagination()
      return ((current - 1) * pageSize) + index + 1
    },
    loadData (param) {
      return apiGetFeedbackList(param).then(res => {
        if (res.content) {
          res.content = res.content.map(e => {
            e.createTime = moment(e.createTime).format('YYYY-MM-DD HH:mm:ss')
            return e
          })
        }
        return res
      })
    },
    refreshData () {
      this.$refs.table.refresh()
    },
    openDetailsModal (row) {
      this.currentRow = row
      this.detailsModalVisible = true
    },
    handleCancel () {
      this.detailsModalVisible = false
    }
  }
}
</script>

<style scoped lang='less'>
.feedback-list {
  .table__column--content {
    width: 500px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .feedback-list__modal {
    .modal-content {
      .feedback-list__time {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;
        .create-time {
          color: rgba(0, 0, 0, .65);
        }
      }
      .feedback-list__content {
        .ant-input {
          color: #A5AFBD;
        }
      }
    }
  }

}

</style>
